<template>
  <Content title="用户">
    <div slot="body">
      <el-row>
        <el-form :inline="true" :model="queryParams">
          <el-form-item label="账号">
            <el-input v-model="queryParams.name" placeholder="账号/邮箱/手机号"></el-input>
          </el-form-item>
          <el-form-item label="部门" prop="departmentId" class="my-queryParams-item">
            <el-cascader :options="departments"
                         change-on-select clearable
                         :props="defaultProps" v-model="queryParams.departmentIds"></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query(undefined,undefined)" plain icon="el-icon-search">查询</el-button>
          </el-form-item>
          <el-form-item style="float: right">
            <router-link to="/user/new">
              <el-button type="success" plain icon="el-icon-circle-plus">新增</el-button>
            </router-link>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-table v-loading="loading"
                  :data="table.rows"
                  border
                  stripe
                  style="width: 100%">
          <el-table-column
            prop="name"
            label="账号"
            align="center"
            width="150">
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            align="center"
            width="220">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            align="center"
            width="150">
          </el-table-column>
          <el-table-column
            prop="departmentId"
            label="部门"
            align="center"
            width="150">
            <template slot-scope="scope">
              <el-tag>{{getDepartmentNameById(scope.row.departmentId)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            align="center"
            label="状态"
            width="100">
            <template slot-scope="scope">
              {{scope.row.status==1?'正常':'失效'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            align="center"
            label="操作"
            width="300">
            <template slot-scope="scope">
              <router-link :to="'/user/'+scope.row.id">
                <el-button
                  type="warning"
                  size="mini">编辑
                </el-button>
              </router-link>
              <router-link :to="'/user/role/'+scope.row.name">
                <el-button
                  type="success"
                  size="mini">角色
                </el-button>
              </router-link>
              <el-button
                type="danger"
                size="mini"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="table.pageNumber"
          :page-sizes="[5, 10, 20, 30, 50]"
          :page-size="table.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="table.total">
        </el-pagination>
      </el-row>
    </div>
  </Content>
</template>

<script>
  import util from '../../utils/util'
  import {SessionStorageUtil, deleteConfirm} from '../../utils/element-helper'
  import Content from '../../components/Content.vue'
  import {mapState, mapActions} from 'vuex'
  import {User, Department} from '../../utils/resource'

  export default {
    name: 'user',
    components: {
      Content,
    },
    data() {
      return {
        loading: false,
        queryParams: {
          name: null,
          departmentIds: [],
          sortColumn: "created desc",
        },
        table: {
          rows: [],
          total: 0,
          pageSize: 10,
          pageNumber: 1,
        },
        defaultProps: {
          value: "id",
          label: 'name',
          children: 'children'
        },
        departments: []
      }
    },
    created() {
      //保存查询条件
      let q = SessionStorageUtil.getItem("user_query")
      if (q){
        this.queryParams = q
      }
      this.loadDepartments()
      this.query()
    },
    computed: {},
    methods: {
      ...mapActions("department", [
        "setDepartments",
      ]),
      async loadDepartments() {
        this.loading = true
        let response = await Department.tree()
        this.departments = response.data
        this.setDepartments(response.data)
        this.$nextTick(() => {
          this.loading = false
        })
      },
      getDepartmentNameById(id) {
        return util.getTreeText(this.departments, 'id', 'name', id, "未分配")
      },
      handleSizeChange(val) {
        this.query(val)
      },
      handleCurrentChange(val) {
        this.query(undefined, val)
      },
      async query(pageSize, pageNumber) {
        this.queryParams.departmentId = this.queryParams.departmentIds[this.queryParams.departmentIds.length - 1]
        await User.paging(this, pageNumber, pageSize)
        SessionStorageUtil.setItem("user_query", this.queryParams)
      },
      handleDelete(index, row) {
        deleteConfirm(this, {}, () => User.del(row.id), (resp) => this.query())
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
